<script setup lang="ts">

import { onMounted, reactive, ref } from 'vue'
import type { PageInfo, Result } from '@/tools/request'
import { Message, Modal } from '@arco-design/web-vue'
import type { SysRole } from '@/api/system/sysRole/sysRole.d'
import {
  sysRoleAdd,
  sysRoleById, sysRoleList,
  sysRoleModify, sysRoleRefresh,
  sysRoleRemove, sysRoleRemoveBatch
} from '@/api/system/sysRole/sysRole'
import MenuSelectComponent from '@/components/MenuSelectComponent.vue'
import type { SysMenu } from '@/api/system/sysMenu/sysMenu.d'
import type { SysPermission } from '@/api/system/sysPermission/sysPermission.d'
import PermissionSelectComponent from '@/components/PermissionSelectComponent.vue'

//表单部分
const sysRoleFormRef = ref()
const sysRoleForm = reactive({
  //搜索表单
  query: {} as SysRole,
  submitQuery: () => {
    sysRoleList(sysRoleForm.query, {
      pageNum: sysRoleTable.pageInfo.pageNum,
      pageSize: sysRoleTable.pageInfo.pageSize
      //@ts-ignore
    }).then((resp: Result<PageInfo<SysRole>>) => {
        sysRoleTable.pageInfo = resp.data
      }
    )
  },
  //新增修改表单
  form: {
    id: null,
    createTime: null,
    updateTime: null,
    remark: null,
    roleName: null,
    sysMenus: [],
    sysPermissions: []
  } as SysRole,
  submitForm: ({ values, errors }: any) => {
    if (errors) return
    //修改
    if (sysRoleForm.form.id) {
      sysRoleModify(sysRoleForm.form).then(() => {
        Message.success('修改系统角色成功')
        sysRoleForm.visible = false
        sysRoleForm.submitQuery()
      })
      return
    }
    //新增
    sysRoleAdd(sysRoleForm.form).then(() => {
      Message.success('新建系统角色成功')
      sysRoleForm.visible = false
      sysRoleForm.submitQuery()
    })
  },
  //弹出层title
  formTitle: '新增系统角色',
  //是否显示新增修改表单
  visible: false,
  selectMenusVisible: false,
  selectPermissionsVisible: false,

  selectMenus: (menus: SysMenu[]) => {
    sysRoleForm.form.sysMenus = menus
  },
  selectPermission: (permissions: SysPermission[]) => {
    sysRoleForm.form.sysPermissions = permissions
  }
})

const sysRoleTable = reactive({
  pageInfo: {} as PageInfo<SysRole>,
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  },
  getList: (current: number) => {
    sysRoleList(sysRoleForm.query, {
      pageNum: current,
      pageSize: sysRoleTable.pageInfo.pageSize
      //@ts-ignore
    }).then((resp: Result<PageInfo<SysRoleTable>>) => {
      sysRoleTable.pageInfo = resp.data
    })
  },
  selectKeys: [] as string[],
  batchDelete: () => {
    Modal.confirm({
      title: '警告',
      content: `确认删除系统角色【${sysRoleTable.selectKeys}】吗？`,
      onOk(e) {
        sysRoleRemoveBatch(sysRoleTable.selectKeys!).then(() => {
          Message.success(`批量删除系统角色成功`)
          sysRoleForm.submitQuery()
        })
      }
    })
  },
  add: () => {
    //新增系统角色
    sysRoleFormRef.value!.resetFields()
    sysRoleForm.formTitle = '新增系统角色'
    sysRoleForm.visible = true
    sysRoleForm.form.id = null
  },
  edit: (sysRole: SysRole) => {
    //编辑系统角色
    sysRoleFormRef.value!.resetFields()
    sysRoleForm.formTitle = '修改系统角色'
    sysRoleForm.visible = true
    //@ts-ignore
    sysRoleById(sysRole.id!).then((resp: Result<SysRole>) => {
      sysRoleForm.form = resp.data
    })
  },
  delete: (sysRole: SysRole) => {
    //删除系统角色
    Modal.confirm({
      title: '警告！',
      content: `确认删除系统角色【${sysRole.id}】吗？`,
      onOk(e) {
        sysRoleRemove(sysRole.id!).then(() => {
          Message.success(`删除系统角色【${sysRole.id}】成功`)
          sysRoleForm.submitQuery()
        })
      }
    })
  },
  refresh: () => {
    //@ts-ignore
    sysRoleRefresh().then((resp: Result<any>) => {
      Message.success(resp.msg)
    })
  }
})

onMounted(() => {
  sysRoleForm.submitQuery()
})


</script>

<template>
  <a-breadcrumb class="my-3">
    <a-breadcrumb-item>系统工具</a-breadcrumb-item>
    <a-breadcrumb-item>角色管理</a-breadcrumb-item>
  </a-breadcrumb>
  <a-layout-content>
    <a-card>
      <template #title>
        角色管理
      </template>

      <a-space class="my-3">
        <a-button type="primary" @click="sysRoleTable.add" v-permission="'permission:sysRole:create'">
          <template #icon>
            <IconPlus />
          </template>
          新建
        </a-button>
        <a-button class="removeBtn" @click="sysRoleTable.batchDelete" v-permission="'permission:sysRole:batchDelete'">
          <template #icon>
            <IconDelete />
          </template>
          删除
        </a-button>
        <a-button @click="sysRoleTable.refresh" v-permission="'permission:sysRole:refresh'">
          <template #icon>
            <IconRefresh />
          </template>
          刷新角色权限菜单缓存
        </a-button>
      </a-space>

      <a-table row-key="id" :data="sysRoleTable.pageInfo.list"
               :row-selection="sysRoleTable.rowSelection"
               v-model:selected-keys="sysRoleTable.selectKeys" :pagination="false">
        <template #columns>
          <a-table-column data-index="id" title="ID" />
          <a-table-column data-index="roleName" title="角色名称" />
          <a-table-column data-index="remark" title="备注" />
          <a-table-column data-index="createTime" title="创建时间" />
          <a-table-column title="操作" width="200">
            <template #cell="{record}">
              <a-space>
                <a-button @click="sysRoleTable.edit(record)" type="text" v-permission="'permission:sysRole:update'">
                  <template #icon>
                    <IconEdit />
                  </template>
                  编辑
                </a-button>
                <a-button @click="sysRoleTable.delete(record)" type="text"
                          v-permission="'permission:sysRole:delete'"
                          class="text-danger">
                  <template #icon>
                    <IconDelete />
                  </template>
                  删除
                </a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>

      <div class="d-flex justify-content-end mt-2">
        <a-pagination :total="sysRoleTable.pageInfo.total" :page-size="sysRoleTable.pageInfo.pageSize"
                      :current="sysRoleTable.pageInfo.pageNum"
                      @change="sysRoleTable.getList" class="mt-3"></a-pagination>
      </div>

      <a-modal :title="sysRoleForm.formTitle" title-align="start"
               v-model:visible="sysRoleForm.visible"
               :footer="null">
        <a-form ref="sysRoleFormRef" :model="sysRoleForm.form"
                @submit="sysRoleForm.submitForm">

          <a-form-item field="roleName" hide-asterisk label="角色名称"
                       :rules="[{ required: true,message: '角色名称不能为空！' }]"
                       validate-trigger="blur">
            <a-input v-model="sysRoleForm.form.roleName"></a-input>
          </a-form-item>
          <a-form-item label="系统菜单">
            <a-button @click="sysRoleForm.selectMenusVisible = true">
              <template #icon>
                <IconMenuFold />
              </template>
              添加菜单
            </a-button>
          </a-form-item>
          <a-form-item label="系统权限">
            <a-button @click="sysRoleForm.selectPermissionsVisible= true">
              <template #icon>
                <IconStop />
              </template>
              添加权限
            </a-button>
          </a-form-item>
          <a-form-item field="remark" hide-asterisk label="备注"
                       validate-trigger="blur">
            <a-input v-model="sysRoleForm.form.remark"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">提交</a-button>
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </a-layout-content>
  <MenuSelectComponent :select-keys="sysRoleForm.form.sysMenus?.map(v=>v.id)"
                       v-model:visible="sysRoleForm.selectMenusVisible" @commit="sysRoleForm.selectMenus" />
  <PermissionSelectComponent :select-keys="sysRoleForm.form.sysPermissions?.map(v=>v.id)"
                             v-model:visible="sysRoleForm.selectPermissionsVisible"
                             @commit="sysRoleForm.selectPermission" />
</template>

<style scoped lang="scss">
</style>
